import React, {Component} from 'react';

interface IMdEditor {
    id: string;
    width?: any;
    height?: any;
    defaultValue?: string;
    onRef: any;
    toolsBar?: Array<any>;
}

class MdEditor extends Component<IMdEditor, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            value: ""
        }
    }

    md: any;

    componentDidMount() {
        this.props.onRef(this);
        let toolbars = this.props.toolsBar;
        // @ts-ignore
        let editor = editormd(this.props.id, {
            width: this.props.width ? this.props.width : "80%",
            height: this.props.height ? this.props.height : 600,
            placeholder: "请输入...",
            // disabledKeyMaps: ["F11"],//禁用全屏键
            // markdown: "xxxx",     // dynamic set Markdown text
            path: `/thinkback/editor.md/lib/`,  // Autoload modules mode, codemirror, marked... dependents libs path
            codeFold: true,
            toolbarIcons: function () {
                if (toolbars)
                    return toolbars;
                return [
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "link", "image", "code", "code-block", "|",
                    "watch", "clear", "|",
                    "help"
                ]
            },
            //syncScrolling : false,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            watch: true,                // 关闭实时预览
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji: false,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "https://ilab.arvroffer.com/api/utils/v1/upload",
            // crossDomainUpload: true,
            // uploadCallbackURL: "https://ilab.arvroffer.com/api/utils/v1/upload"
        });
        this.md = editor;
        if (this.props.defaultValue) {
            this.setState({value: this.props.defaultValue});
        }
    }

    Submit = () => {
        const value = this.md.getMarkdown();
        return value;
    }
    Clear = () => {
        this.md?.clear();
    }
    ResetMarkdown = (value) => {
        if (value) {
            console.log(value);
            this.md?.setMarkdown(value);
        } else {
            this.Clear();
        }
    }

    render() {
        return (
            <div>
                <div id={this.props.id}>
                <textarea value={this.state.value} onChange={() => {
                }}>
                </textarea>
                </div>
            </div>
        );
    }
}

export default MdEditor;
